Hello,
I have a floating div which I drag all over the page. I want to enable
window.scrollBy function when div is dragged close to top or bottom of
the page, so users would drag this div to the very top or bottom of the
long page. However, when my page gets scrolled up or down, the div I
drag with my mouse scrolls with page too, and I no longer hold the div.
I added a functionality to change the top position of the div to be the
same as mouse top position but that does not seem to work well.
Can anyone suggest something for my case? I'd really be grateful. 3 2963
<vu******@gmail.comschreef
Hello,
I have a floating div which I drag all over the page. I want to enable
window.scrollBy function when div is dragged close to top or bottom of
the page, so users would drag this div to the very top or bottom of the
long page. However, when my page gets scrolled up or down, the div I
drag with my mouse scrolls with page too, and I no longer hold the div.
I added a functionality to change the top position of the div to be the
same as mouse top position but that does not seem to work well.
Can anyone suggest something for my case? I'd really be grateful.
Can post an url to an example page? It sounds a tad overcomplicated. I
understand you want to scroll when the window when the object being dragged
gets close to the edge. Is that right? Then you need adjust the position of
the dragged object with the amount that the window scrolls. So instead of
looking at the mouse at this point, look at the distance that the window
travels.
HTH
Ivo http://4umi.com/web/javascript/
Thank you. I'll see if I can post an example.
Ivo wrote:
<vu******@gmail.comschreef
Hello,
I have a floating div which I drag all over the page. I want to enable
window.scrollBy function when div is dragged close to top or bottom of
the page, so users would drag this div to the very top or bottom of the
long page. However, when my page gets scrolled up or down, the div I
drag with my mouse scrolls with page too, and I no longer hold the div.
I added a functionality to change the top position of the div to be the
same as mouse top position but that does not seem to work well.
Can anyone suggest something for my case? I'd really be grateful.
Can post an url to an example page? It sounds a tad overcomplicated. I
understand you want to scroll when the window when the object being dragged
gets close to the edge. Is that right? Then you need adjust the position of
the dragged object with the amount that the window scrolls. So instead of
looking at the mouse at this point, look at the distance that the window
travels.
HTH
Ivo http://4umi.com/web/javascript/
here is my beautiful example
<html><head>
<style type="text/css">
..drag{
position:relative;
cursor:move;
z-index: 100;
}
</style>
<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null,
dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if
(isNaN(parseInt(this.targetobj.style.left))){this. targetobj.style.left=0}
if
(isNaN(parseInt(this.targetobj.style.top))){this.t argetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clie ntX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"
return false
}
}
}
dragobject.initialize()
function getPosition(ev){
ev = ev || window.event;
var mousepos = getMouseCoords(ev)
if(mousepos.y < posTop()+50){
pageScrollUp(mousepos.y,ev)
}
}
function getMouseCoords(ev){
if(ev.pageX || ev.pageY){
return{x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function posTop(){
return typeof window.pageYOffset != 'undefined' ? windowPageYOffset :
document.documentElement
&& document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop ?
document.body.scrollTop : 0;
}
function pageScrollUp(mousePosY,ev){
window.scrollBy(0,-80);
var d = document.getElementById('myDiv');
ev = ev || window.event;
var mousepos = getMouseCoords(ev);
d.style.top = (mousePosY - 80)+'px';
}
</script>
</head><body>
<h1>Test test</h1><h1>Test test test</h1><h1>Test test test
test</h1><h1>Test test test test test</h1>
<h1>Test test test test test test</h1><h1>Test test test test
test</h1><h1>Test test test test</h1>
<h1>Test test test</h1><h1>Test test</h1><h1>Test test</h1><h1>Test
test test</h1><h1>Test test test test</h1>
<h1>Test test test test test</h1>
<div id="myDiv" class="drag" style="border:blue solid
1px;background-color:lightyellow;width:100px;"
onMouseMove='getPosition();'>Drag Me<br>Anywhere</div>
<h1>Test test</h1><h1>Test test test</h1><h1>Test test test
test</h1><h1>Test test test test test</h1>
<h1>Test test test test test test</h1><h1>Test test test test
test</h1><h1>Test test test test</h1>
<h1>Test test test</h1><h1>Test test</h1><h1>Test test</h1><h1>Test
test test</h1><h1>Test test test test</h1>
<h1>Test test test test test</h1>
</body></html> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Adam |
last post by:
Hi
I had Ruby 1.6.8-8 for Windows installed on my WinXP Pro machine prior
to installing Python 2.3. After installing Python 2.3, I tried to
<----- screen output of python interactive command...
|
by: your name here |
last post by:
I've been trying to get the scrollby javascript feature to scroll
through frames. My end goal is to make my own scroll buttons to use
for navigation through the frame but I figured I would start...
|
by: JF |
last post by:
Hi,
I need to change the location of the parent window and after
that scroll a little bit (because of "position:fixed" css buttons,
which obscure the title).
I have...
|
by: BGC |
last post by:
I'm attempting something like this:
win1 =
window.open("pop_up.html","_blank","width=325,height=272,top=0,left=0,scrollbars=0,resizable=0");
win1.window.scrollBy(100,50);
I've done this...
|
by: Robert Gamble |
last post by:
9899:1999 5.1.2.3 Example 4 reads:
"EXAMPLE 4 Implementations employing wide registers have to take care
to honor appropriate semantics. Values are independent of whether they
are represented in a...
|
by: Michi |
last post by:
Hallo.
I just try to implement a scrolling effect to a drag and drop script.
If you try to drag something to an area beneath the visible area of
your browser window, the window should scroll...
|
by: vunet.us |
last post by:
Hello JavaScript experts,
I have a floating div which I drag all over the page. If the page has
scrollbars and users drag the floating div to the very top, page
scrolls up too. The problem occurs...
|
by: lotus18 |
last post by:
Hello World
I have a problem in detecting the conflict schedule (Day and Time).
Day
1. M
2. T
3. W
4. TH
5. F
|
by: lotus18 |
last post by:
Hello all
I have these records on my Day Table for my complete database table please click here
1. M
2. T
3. W
4. TH
5. F
6. S
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
| |